.loader {
    /* color of choise */
    --clr: #209978;
    /* loading time of choice */
    --load-time: 50s;
    outline: 2px solid var(--clr);
    outline-offset: 2px;
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    /* width: 10rem; */
    /* height: 2rem; */
    padding: 0.25rem 3rem;
    /* use either padding or width + height*/
    /* I prefer the padding one */
    /* rotate: -90deg; */
    /* rotate if you want/need vertical loader */
}

.loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-color: var(--clr);
    z-index: 2;
    animation: loading var(--load-time) ease-in-out infinite;
}

@keyframes loading {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}